<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{{ $component->chinese_title }}</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.13/codemirror.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.13/theme/dracula.min.css">
    <link rel="stylesheet" href="/css/pretty-print-json.css">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <style>
        html, body {
            margin: 0;
            padding: 0;
            height: 100%;
            overflow: hidden;
        }

        #topbar {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 50px;
            background-color: #111;
            color: #fff;
            display: flex;
            align-items: center;
            padding: 0 10px;
            z-index: 10;
            justify-content: space-between;
        }

        #topbar button {
            background-color: #444;
            color: #fff;
            border: none;
            padding: 6px 12px;
            cursor: pointer;
            border-radius: 4px;
            margin-right: 20px;
        }

        #container {
            display: flex;
            flex-direction: column;
            height: calc(100vh - 50px);
            margin-top: 50px;
        }

        #top {
            background-color: white;
            height: 50%;
            min-height: 30px;
            overflow: hidden;
            position: relative;
        }

        #top iframe {
            width: 100%;
            height: 100%;
            border: none;
            display: block;
        }

        #dragbar {
            height: 15px;
            background-color: #333;
            cursor: row-resize;
            z-index: 2;
        }

        #bottom {
            background-color: #282a36;
            flex-grow: 1;
            min-height: 30px;
            overflow: auto; /* Changed from hidden to auto */
            display: flex;
            flex-direction: row;
            height: 100%;
        }

        #bottom-left {
            background-color: #282a36;
            flex-basis: 50%;
            min-width: 30px;
            overflow: auto; /* Changed from hidden to auto */
            display: flex;
            flex-direction: column;
        }

        .editor {
            flex-grow: 1;
            width: 100%;
        }

        #vdragbar {
            width: 15px;
            background-color: #333;
            cursor: col-resize;
        }

        #bottom-right {
            background-color: transparent;
            flex-grow: 1;
            min-width: 30px;
            overflow: auto;
        }

        .vertical-layout #container {
            flex-direction: row;
        }

        .vertical-layout #top {
            width: 50%;
            height: 100%;
            min-width: 30px;
            min-height: 100%;
        }

        .vertical-layout #dragbar {
            width: 15px;
            height: 100%;
            cursor: col-resize;
        }

        .btn {
            outline: none;
            background-color: transparent;
            color:lightgray;
            margin:6px;
            font-size: 1.3rem;
            padding: 5px 15px;
            border-radius: 5px;
            border:1px solid lightgray;
            cursor: pointer;
        }

        .vertical-layout #bottom {
            flex-direction: column;
            width: 50%;
            height: 100%;
        }

        .vertical-layout #vdragbar {
            width: 100%;
            height: 15px;
            cursor: row-resize;
        }

        .bottom-right-menu > button.active {
            border:1px solid red;
        }

        div.bottom-content-container > div {
            display:none;
        }

        div.bottom-content-container > div.active {
            display:block;
            color: lightgray;
            margin:8px;
        }

        .bottom-right, .bottom-left {
            background-color:#282a36;
            border:1px solid lightgray;
        }

        .bottom-left-menu {
            background-color: transparent;
            display: flex;
        }

        .bottom-left-menu .btn {
            text-transform: uppercase;
            display: flex;
            align-items: center;
            gap:5px;
        }

        .bottom-left-menu .btn.active {
            background-color: #000000;
            color:white;
            font-weight: bold;
        }

        #component_tree ul.tree {
            list-style: none;
            padding-left: 20px;
            font-family: sans-serif;
        }

        #component_tree .tree-item {
            margin: 4px 0;
            cursor: pointer;
        }

        #component_tree .toggle-button {
            font-weight: bold;
            margin-right: 6px;
            cursor: pointer;
            color: #007BFF;
        }

        #component_tree .hidden {
            display: none;
        }

        #demo_data .tree {
            font-family: monospace;
            line-height: 1.6;
        }
        #demo_data .node {
            margin-left: 20px;
            position: relative;
        }
        #demo_data .toggle {
            cursor: pointer;
            display: inline-block;
            width: 16px;
            text-align: center;
            margin-right: 6px;
            color: white;
            font-weight: bold;
        }
        #demo_data .key {
            color: white;
        }
        #demo_data .value {
            color: lightgreen;
        }
        #demo_data .hidden {
            display: none;
        }

        .tab-content {
            display: none;
        }

        .tab-content.active {
            display: block;
        }

        .CodeMirror {
            height: 100%;
            min-height: 100px;
        }

        .CodeMirror-scroll {
            overflow: auto !important;
        }

        .tree-node {
            margin-left: 1.5rem;
            margin-top: 0.5rem;
            font-family: Arial, sans-serif;
        }

        .node-title {
            display: flex;
            align-items: center;
            color: #1a1a1a;
            font-size: 1rem;
            padding: 0.25rem 0;
            cursor: pointer;
        }

        .toggle-btn {
            background: none;
            border: none;
            cursor: pointer;
            margin-right: 0.75rem;
            padding: 0.25rem;
            border-radius: 4px;
            transition: background-color 0.2s;
        }

        .toggle-btn:hover {
            background-color: #f0f0f0;
        }

        .icon {
            width: 1rem;
            height: 1rem;
            stroke: #4a4a4a;
            stroke-width: 2;
        }

        .node-children {
            margin-left: 1.5rem;
            border-left: 1px solid #d1d5db;
            padding-left: 0.75rem;
        }

        .node-title span {
            padding: 0.25rem 0.5rem;
            border-radius: 4px;
            transition: background-color 0.2s;
        }

        .node-title span:hover, .toggle-btn:hover {
            background-color: #4a4a4a;
            color:white;
        }

        .toggle-btn:hover .icon {
            stroke: white;
        }

        .node-title span {
            background-color: #e5e7eb;
        }

    </style>
</head>
<body>
<div id="topbar">
    <div>
        {{ $component->chinese_title }}
    </div>
    <div>
        @foreach($component->viewports as $viewport)
            @if($viewport == 'desktop')
        <button id="toggleBottom">
            <svg t="1746344116369" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="13781" width="24" height="24"><path d="M899.544477 127.981836 123.664507 127.981836c-32.962739 0-59.683311 28.626991-59.683311 63.943334l0 447.601294c0 35.31532 26.720571 63.943334 59.683311 63.943334l358.098841 0-119.366621 191.82898 298.41553 0-119.366621-191.82898 358.098841 0c32.962739 0 59.683311-28.626991 59.683311-63.943334L959.227788 191.925171C959.227788 156.608827 932.508239 127.981836 899.544477 127.981836zM899.544477 575.583131c0 35.31532-26.720571 63.943334-59.683311 63.943334L183.347818 639.526465c-32.962739 0-59.683311-28.626991-59.683311-63.943334L123.664507 255.867482c0-35.31532 26.720571-63.943334 59.683311-63.943334L839.862189 191.924147c32.962739 0 59.683311 28.626991 59.683311 63.943334L899.5455 575.583131z" fill="#ffffff" p-id="13782"></path></svg>
        </button>
            @endif

            @if($viewport == 'mobile')
               <button id="toggleLayout">
                  <svg t="1746343268054" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1515" width="24" height="24"><path d="M272 85.312v853.376h480V85.312h-480zM232 0h560c22.08 0 40 19.072 40 42.688v938.624c0 23.616-17.92 42.688-40 42.688h-560C209.92 1024 192 1004.928 192 981.312V42.688C192 19.072 209.92 0 232 0z m40 810.688h480v170.624h-480v-170.624z m240 128c22.08 0 40-19.136 40-42.688 0-23.552-17.92-42.688-40-42.688s-40 19.136-40 42.688c0 23.552 17.92 42.688 40 42.688z" fill="#ffffff" p-id="1516"></path></svg>
                </button>
                @endif

            @if($viewport == 'tablet')
                    <button id="toggleTablet">
                        <svg t="1746343686013" class="icon hover:text-black" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2595" width="24" height="24"><path d="M810.666667 768 213.333333 768 213.333333 256 810.666667 256M896 170.666667 128 170.666667C80.64 170.666667 42.666667 208.64 42.666667 256L42.666667 768C42.666667 814.933333 81.066667 853.333333 128 853.333333L896 853.333333C942.933333 853.333333 981.333333 814.933333 981.333333 768L981.333333 256C981.333333 208.64 942.933333 170.666667 896 170.666667Z" p-id="2596" fill="#ffffff"></path></svg>
                    </button>
                @endif
        @endforeach
            <button id="addToProject">
                <svg t="1750313047326" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4636" width="24" height="24"><path d="M896 896l-45.44-45.12A63.808 63.808 0 0 1 896 832a64 64 0 0 0 64-64V128a64 64 0 0 0-64-64H256a64 64 0 0 0-64 64v5.44c0 17.6-7.04 33.536-18.56 45.12L128 133.44V128a128 128 0 0 1 128-128h640a128 128 0 0 1 128 128v640a128 128 0 0 1-128 128zM64 256v640a64 64 0 0 0 64 64h640a64 64 0 0 0 64-64V256a64 64 0 0 0-64-64H128a64 64 0 0 0-64 64z m704-128a128 128 0 0 1 128 128v640a128 128 0 0 1-128 128H128a128 128 0 0 1-128-128V256a128 128 0 0 1 128-128h640z" fill="#ffffff" p-id="4637"></path><path d="M160 256h384a32 32 0 0 1 0 64h-384a32 32 0 0 1 0-64z m576 64a32 32 0 1 1 0-64 32 32 0 0 1 0 64zM64 384h768v64H64V384z" fill="#ffffff" p-id="4638"></path></svg>
            </button>

        <button id="switchDark">
            <svg t="1751439864294" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4769" width="24" height="24"><path d="M529.611373 1023.38565c-146.112965 0-270.826063-51.707812-374.344078-155.225827C51.74928 764.641808 0.041469 639.826318 0.041469 493.815745c0-105.053891 29.693595-202.326012 88.978393-292.22593 59.38719-89.797526 137.000103-155.942569 232.83874-198.63991 6.041111-4.607627 12.184613-3.788493 18.225724 2.252618 7.576986 4.607627 9.931996 11.365479 6.860244 20.580733C322.677735 83.736961 310.493122 142.202626 310.493122 201.589815c0 135.464227 48.328885 251.474031 144.986656 348.131801 96.657771 96.657771 212.667574 144.986656 348.131801 144.986656 74.541162 0 139.252721-11.365479 194.032283-34.19883C1003.684974 655.799424 1009.726084 656.618558 1015.767195 662.659669c7.576986 4.607627 9.931996 11.365479 6.860244 20.580733C983.104241 786.758417 918.802249 869.286132 829.721465 930.925939 740.743072 992.565746 640.706375 1023.38565 529.611373 1023.38565z" p-id="4770" fill="#ffffff"></path></svg>
        </button>
    </div>
</div>

<div id="container">
    <div id="top">
        <iframe id="contentFrame" src="/demo/{{ $component->slug }}/index.html" title="Iframe Content"></iframe>
    </div>
    <div id="dragbar"></div>
    <div id="bottom">
        <div id="bottom-left">
            <div class="bottom-left-menu">
                @foreach($component->componentTypes as $key => $type)
                    <button class="btn {{ $key == 0 ? 'active' : '' }}" data-key="{{ $type['framework'] }}">
                        @if($type['framework'] === 'vue')
                          <svg t="1746584925820" class="icon" viewBox="0 0 1186 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4925" width="24" height="24"><path d="M869.52386204 159.15885416H1052.78178049L594.63698399 949.45862779 136.4921875 159.15885416h350.48076905L594.63698399 342.41677261 700.01028734 159.15885416h169.5135747z" fill="#41B883" p-id="4926"></path><path d="M136.4921875 159.15885416l458.14479649 790.29977362L1052.78178049 159.15885416h-183.25791845L594.63698399 633.33871848 317.45938184 159.15885416H136.4921875z" fill="#41B883" p-id="4927"></path><path d="M317.45938184 159.15885416L594.63698399 635.62944258 869.52386204 159.15885416h-169.5135747L594.63698399 342.41677261 486.97295655 159.15885416H317.45938184z" fill="#35495E" p-id="4928"></path></svg>
                        @endif
                        @if($type['framework'] === 'react')
                                <svg t="1746585431449" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9489" width="24" height="24"><path d="M512 431.36c43.946667 0 79.786667 35.84 79.786667 80.64 0 42.666667-35.84 78.933333-79.786667 78.933333S432.213333 554.666667 432.213333 512c0-44.8 35.84-80.64 79.786667-80.64M314.453333 853.333333c26.88 16.213333 85.76-8.533333 153.6-72.533333-22.186667-25.173333-43.946667-52.48-64.426666-81.066667a968.533333 968.533333 0 0 1-102.4-15.36c-21.76 91.306667-13.653333 154.026667 13.226666 168.96m30.293334-244.906666l-12.373334-21.76c-4.693333 12.373333-9.386667 24.746667-12.373333 36.693333 11.52 2.56 24.32 4.693333 37.546667 6.826667l-12.8-21.76m279.04-32.426667l34.56-64-34.56-64c-12.8-22.613333-26.453333-42.666667-38.826667-62.72C561.92 384 537.6 384 512 384s-49.92 0-72.96 1.28c-12.373333 20.053333-26.026667 40.106667-38.826667 62.72L365.653333 512l34.56 64c12.8 22.613333 26.453333 42.666667 38.826667 62.72 23.04 1.28 47.36 1.28 72.96 1.28s49.92 0 72.96-1.28c12.373333-20.053333 26.026667-40.106667 38.826667-62.72M512 289.28c-8.106667 9.386667-16.64 19.2-25.173333 30.72h50.346666c-8.533333-11.52-17.066667-21.333333-25.173333-30.72m0 445.44c8.106667-9.386667 16.64-19.2 25.173333-30.72h-50.346666c8.533333 11.52 17.066667 21.333333 25.173333 30.72M709.12 170.666667c-26.453333-16.213333-85.333333 8.533333-153.173333 72.533333 22.186667 25.173333 43.946667 52.48 64.426666 81.066667 34.986667 3.413333 69.546667 8.533333 102.4 15.36 21.76-91.306667 13.653333-154.026667-13.653333-168.96m-29.866667 244.906666l12.373334 21.76c4.693333-12.373333 9.386667-24.746667 12.373333-36.693333-11.52-2.56-24.32-4.693333-37.546667-6.826667l12.8 21.76m61.866667-300.8c62.72 35.84 69.546667 130.133333 43.093333 240.213334 108.373333 32 186.453333 84.906667 186.453334 157.013333s-78.08 125.013333-186.453334 157.013333c26.453333 110.08 19.626667 204.373333-43.093333 240.213334-62.293333 35.84-147.2-5.12-229.12-83.2-81.92 78.08-166.826667 119.04-229.546667 83.2-62.293333-35.84-69.12-130.133333-42.666666-240.213334-108.373333-32-186.453333-84.906667-186.453334-157.013333s78.08-125.013333 186.453334-157.013333c-26.453333-110.08-19.626667-204.373333 42.666666-240.213334 62.72-35.84 147.626667 5.12 229.546667 83.2 81.92-78.08 166.826667-119.04 229.12-83.2M728.746667 512c14.506667 32 27.306667 64 37.973333 96.426667 89.6-26.88 139.946667-65.28 139.946667-96.426667s-50.346667-69.546667-139.946667-96.426667c-10.666667 32.426667-23.466667 64.426667-37.973333 96.426667M295.253333 512c-14.506667-32-27.306667-64-37.973333-96.426667-89.6 26.88-139.946667 65.28-139.946667 96.426667s50.346667 69.546667 139.946667 96.426667c10.666667-32.426667 23.466667-64.426667 37.973333-96.426667m384 96.426667l-12.8 21.76c13.226667-2.133333 26.026667-4.266667 37.546667-6.826667-2.986667-11.946667-7.68-24.32-12.373333-36.693333l-12.373334 21.76m-123.306666 172.373333c67.84 64 126.72 88.746667 153.173333 72.533333 27.306667-14.933333 35.413333-77.653333 13.653333-168.96-32.853333 6.826667-67.413333 11.946667-102.4 15.36-20.48 28.586667-42.24 55.893333-64.426666 81.066667M344.746667 415.573333l12.8-21.76c-13.226667 2.133333-26.026667 4.266667-37.546667 6.826667 2.986667 11.946667 7.68 24.32 12.373333 36.693333l12.373334-21.76m123.306666-172.373333C400.213333 179.2 341.333333 154.453333 314.453333 170.666667c-26.88 14.933333-34.986667 77.653333-13.226666 168.96a968.533333 968.533333 0 0 1 102.4-15.36c20.48-28.586667 42.24-55.893333 64.426666-81.066667z" fill="#00BCD4" p-id="9490"></path></svg>
                        @endif

                        @if($type['framework'] === 'blade')
                                <svg t="1746605257082" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4947" width="24" height="24"><path d="M1020.39936 521.088c-6.784-7.616-100.544-125.44-117.056-145.472a29.184 29.184 0 0 0-34.752-14.912c-10.176 1.472-128.832 21.504-142.592 23.808s-22.464 7.872-14.016 19.776l102.72 145.984-310.016 74.624L258.03136 211.2a29.248 29.248 0 0 0-34.176-18.688c-22.336 0.896-193.472 15.104-205.632 16.192s-25.6 6.4-13.376 35.328 206.528 449.152 211.904 461.376a41.6 41.6 0 0 0 52.48 24.128c33.792-8.128 150.976-38.848 214.976-55.68 33.792 61.504 102.848 186.176 115.584 204.096 17.024 23.872 28.736 19.904 54.912 11.968 20.416-6.4 319.488-114.176 332.8-119.68s21.76-9.536 12.8-23.104c-6.4-9.92-85.568-116.032-126.912-171.52l139.648-37.376c12.8-3.392 14.208-9.536 7.424-17.216zM456.62336 636.8c-3.712 0.768-177.408 42.56-186.688 44.8s-9.28 1.024-10.304-2.112S53.10336 250.88 50.28736 245.568s-2.688-9.536 0-9.536 164.032-14.528 169.728-14.784 5.12 0.896 7.168 4.544L458.73536 627.2c4.032 6.4 1.6 8.768-2.112 9.536z m489.728 92.096c2.752 4.352 5.504 7.168-3.2 10.304s-293.952 99.776-299.52 102.4-9.92 3.2-17.024-7.168-99.904-171.52-99.904-171.52l302.336-79.232c7.488-2.368 9.92-3.968 14.656 3.584s99.84 137.152 102.4 141.568z m19.2-215.424c-6.784 1.472-117.824 29.12-117.824 29.12l-90.624-125.056c-2.56-3.584-4.672-7.232 1.664-8.064s109.504-19.584 114.176-20.608a11.2 11.2 0 0 1 14.4 5.568c5.696 7.808 84.224 107.52 87.168 111.168s-2.112 6.4-8.896 7.616z" fill="#E87537" p-id="4948"></path></svg>
                        @endif
                        <span>{{ $type['framework'] }}</span>
                    </button>
                @endforeach
            </div>

            @foreach($component->componentTypes as $key => $type)
               <div id="tab-content{{ $type["framework"] }}" class="tab-content {{ $type['framework'] === 'vue' ? 'active' : '' }}">
                   <textarea class="editor" id="{{ $type["framework"] }}">{{ $type["code"] }}</textarea>
               </div>
            @endforeach
        </div>
        <div id="vdragbar"></div>
        <div id="bottom-right">
            <div class="bottom-right-menu">
                <button class="btn active" data-key="description">Description</button>
                @if($component["component_tree"])
                   <button class="btn" data-key="component_tree">component tree</button>
                @endif
                @if($component["demo_data"])
                   <button class="btn" data-key="demo_data">Demo data</button>
                @endif
            </div>

            <div class="bottom-content-container">
                <div id="description" class="active">
                   {!! $component["description_html"] !!}
                </div>

                @if($component["component_tree"])
                   <div id="component_tree"></div>
                @endif
                @if($component["demo_data"])
                   <div id="demo_data"></div>
                @endif
            </div>
        </div>
    </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.13/codemirror.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.13/mode/javascript/javascript.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.13/mode/xml/xml.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.13/mode/css/css.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.13/mode/htmlmixed/htmlmixed.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.13/mode/clike/clike.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.13/mode/php/php.min.js"></script>
<script src="/js/pretty-print-json.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/sweetalert2/11.16.1/sweetalert2.all.min.js"></script>
<script>

    const dragbar = document.getElementById("dragbar");
    const topDiv = document.getElementById("top");
    const container = document.getElementById("container");
    const iframe = document.getElementById("contentFrame");
    const bottom = document.getElementById("bottom");
    const vdragbar = document.getElementById("vdragbar");
    const bottomLeft = document.getElementById("bottom-left");
    const bottomRightButtons = document.querySelectorAll(".bottom-right-menu button");
    const upBottomLayout = '<svg t="1749009697449" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6049" width="24" height="24"><path d="M192 160a32 32 0 0 0-32 32v640c0 17.664 14.336 32 32 32h640a32 32 0 0 0 32-32v-640a32 32 0 0 0-32-32h-640z m-96 32A96 96 0 0 1 192 96h640a96 96 0 0 1 96 96v640a96 96 0 0 1-96 96h-640a96 96 0 0 1-96-96v-640z" p-id="6050" fill="#ffffff"></path><path d="M96 512a32 32 0 0 1 32-32h768a32 32 0 0 1 0 64H128a32 32 0 0 1-32-32z" p-id="6051" fill="#ffffff"></path><path d="M128 416a32 32 0 0 1 32 32v128a32 32 0 0 1-64 0v-128A32 32 0 0 1 128 416zM896 416a32 32 0 0 1 32 32v128a32 32 0 0 1-64 0v-128a32 32 0 0 1 32-32z" p-id="6052" fill="#ffffff"></path></svg>'
    const singlePagelayout = '<svg t="1748237054330" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="11705" width="24" height="24"><path d="M331.050667 85.333333h361.898666c34.346667 0 62.72 0 85.76 1.877334 24.021333 1.962667 46.08 6.186667 66.773334 16.725333a170.666667 170.666667 0 0 1 74.581333 74.581333c10.538667 20.693333 14.762667 42.752 16.725333 66.730667C938.666667 268.373333 938.666667 296.704 938.666667 331.008v361.941333c0 34.346667 0 62.72-1.877334 85.76-1.962667 24.021333-6.186667 46.08-16.725333 66.773334a170.666667 170.666667 0 0 1-74.581333 74.581333c-20.693333 10.538667-42.752 14.762667-66.730667 16.725333-23.082667 1.877333-51.456 1.877333-85.76 1.877334H331.008c-34.346667 0-62.72 0-85.76-1.877334-24.021333-1.962667-46.08-6.186667-66.773333-16.725333a170.666667 170.666667 0 0 1-74.581334-74.581333c-10.538667-20.693333-14.762667-42.752-16.725333-66.730667C85.333333 755.626667 85.333333 727.296 85.333333 692.992V331.008c0-34.346667 0-62.72 1.877334-85.76 1.962667-24.021333 6.186667-46.08 16.725333-66.773333a170.666667 170.666667 0 0 1 74.581333-74.581334c20.693333-10.538667 42.752-14.762667 66.730667-16.725333C268.373333 85.333333 296.704 85.333333 331.008 85.333333zM252.16 172.288c-18.688 1.493333-28.288 4.266667-34.944 7.68a85.333333 85.333333 0 0 0-37.290667 37.290667c-3.413333 6.656-6.186667 16.213333-7.68 34.944C170.666667 271.402667 170.666667 296.234667 170.666667 332.8v358.4c0 36.565333 0 61.397333 1.621333 80.597333 1.493333 18.688 4.266667 28.288 7.68 34.944a85.333333 85.333333 0 0 0 37.290667 37.290667c6.656 3.413333 16.213333 6.186667 34.944 7.68C271.402667 853.333333 296.234667 853.333333 332.8 853.333333h358.4c36.565333 0 61.397333 0 80.597333-1.621333 18.688-1.493333 28.288-4.266667 34.944-7.68a85.333333 85.333333 0 0 0 37.290667-37.290667c3.413333-6.656 6.186667-16.213333 7.68-34.944 1.578667-19.2 1.621333-44.032 1.621333-80.597333V332.8c0-36.565333 0-61.397333-1.621333-80.597333-1.493333-18.688-4.266667-28.288-7.68-34.944a85.333333 85.333333 0 0 0-37.290667-37.290667c-6.656-3.413333-16.213333-6.186667-34.944-7.68C752.597333 170.666667 727.765333 170.666667 691.2 170.666667H332.8c-36.565333 0-61.397333 0-80.597333 1.621333z" p-id="11706" fill="#ffffff"></path></svg>'
    const desktopIcon = '<svg t="1746344116369" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="13781" width="24" height="24"><path d="M899.544477 127.981836 123.664507 127.981836c-32.962739 0-59.683311 28.626991-59.683311 63.943334l0 447.601294c0 35.31532 26.720571 63.943334 59.683311 63.943334l358.098841 0-119.366621 191.82898 298.41553 0-119.366621-191.82898 358.098841 0c32.962739 0 59.683311-28.626991 59.683311-63.943334L959.227788 191.925171C959.227788 156.608827 932.508239 127.981836 899.544477 127.981836zM899.544477 575.583131c0 35.31532-26.720571 63.943334-59.683311 63.943334L183.347818 639.526465c-32.962739 0-59.683311-28.626991-59.683311-63.943334L123.664507 255.867482c0-35.31532 26.720571-63.943334 59.683311-63.943334L839.862189 191.924147c32.962739 0 59.683311 28.626991 59.683311 63.943334L899.5455 575.583131z" fill="#ffffff" p-id="13782"></path></svg>'


    let isDragging = false;
    let isVDragging = false;
    let isBottomVisible = true;
    let isVerticalLayout = false;
    let storedWidth = "50%";
    let storedHeight = "50%";

    bottomRightButtons.forEach(button => {
        button.addEventListener("click", () => {
            bottomRightButtons.forEach(btn => btn.classList.remove("active"));
            button.classList.add("active");

            const key = button.getAttribute("data-key");
            document.querySelectorAll(".bottom-content-container > div").forEach(div => {
                div.classList.remove("active");
            });
            document.getElementById(key).classList.add("active");
        });
    });

    const editors = document.querySelectorAll(".tab-content");
    const editorBtns = document.querySelectorAll(".bottom-left-menu > .btn");

    function createEditor(id) {
        if (!editors[id]) {
            const textarea = document.getElementById(`${id}`);
            editors[id] = CodeMirror.fromTextArea(textarea, {
                lineNumbers: true,
                mode: "javascript",
                theme: "dracula",
                lineWrapping: true,
            });
        }
    }

    createEditor('vue');

    editorBtns.forEach(button => {
        button.addEventListener('click', () => {
            editorBtns.forEach(b => b.classList.remove('active'));
            editors.forEach(c => c.classList.remove('active'));

            button.classList.add('active');
            const tabId = button.getAttribute('data-key');
            document.getElementById(`tab-content${tabId}`).classList.add('active');

            createEditor(tabId);
        });
    });

    if (document.getElementById("toggleLayout")) {
        document.getElementById("toggleLayout").addEventListener("click", toggleLayout);
    }

    if (document.getElementById("toggleTablet")) {
        document.getElementById("toggleTablet").addEventListener("click", toggleTablet);
    }


    function toggleLayout() {
        if (isVerticalLayout) {
            storedWidth = topDiv.style.width || "50%";
        } else {
            storedHeight = topDiv.style.height || "50%";
        }

        isVerticalLayout = true
        document.body.classList.toggle("vertical-layout", isVerticalLayout);
        document.getElementById("bottom").style.display = "flex"

        resetIframeSize();

        setupDragbars();

        setTimeout(() => {
            if (isVerticalLayout) {
                topDiv.style.width = '430px';
                topDiv.style.height = "100%";
            } else {

                topDiv.style.height = "50%";
                storedHeight = "50%";
                topDiv.style.width = "100%";
            }
            resetIframeSize();
        }, 10);

    }

    function toggleTablet() {
        if (isVerticalLayout) {
            storedWidth = topDiv.style.width || "50%";
        } else {
            storedHeight = topDiv.style.height || "50%";
        }

        isVerticalLayout = true
        document.body.classList.toggle("vertical-layout", isVerticalLayout);
        document.getElementById("bottom").style.display = "flex"

        resetIframeSize();

        setupDragbars();

        setTimeout(() => {
            if (isVerticalLayout) {
                topDiv.style.width = '1024px';
                topDiv.style.height = "100%";
            } else {

                topDiv.style.height = "50%";
                storedHeight = "50%";
                topDiv.style.width = "100%";
            }
            resetIframeSize();
        }, 10);

    }

    // function resetIframeSize() {
    //     iframe.style.width = '100%';
    //     iframe.style.height = '100%';
    //
    //     setTimeout(() => {
    //         iframe.contentWindow.postMessage('resize', '*');
    //         editors['vue'].refresh(); // Refresh editor
    //     }, 50);
    // }


    function resetIframeSize() {

        iframe.style.width = '100%';
        iframe.style.height = '100%';

        setTimeout(() => {
            iframe.contentWindow.postMessage('resize', '*');
        }, 50);
    }

    function setupDragbars() {
        document.body.style.cursor = "";
        dragbar.onmousedown = null;
        vdragbar.onmousedown = null;
        document.onmousemove = null;
        document.onmouseup = null;

        if (isVerticalLayout) {

            dragbar.addEventListener("mousedown", (e) => {
                isDragging = true;
                document.body.style.cursor = "col-resize";
                iframe.style.pointerEvents = 'none';
                e.preventDefault();
            });

            document.addEventListener("mousemove", (e) => {
                if (!isDragging) return;

                const containerRect = container.getBoundingClientRect();
                let newTopWidth = e.clientX - containerRect.left;

                const minWidth = 30;
                const maxTopWidth = container.clientWidth - minWidth - 15;

                if (newTopWidth < minWidth) newTopWidth = minWidth;
                if (newTopWidth > maxTopWidth) newTopWidth = maxTopWidth;

                topDiv.style.width = `${newTopWidth}px`;
                storedWidth = `${newTopWidth}px`;

                resetIframeSize();
            });
        } else {
            dragbar.addEventListener("mousedown", (e) => {
                isDragging = true;
                document.body.style.cursor = "row-resize";
                iframe.style.pointerEvents = 'none';
                e.preventDefault();
            });

            document.addEventListener("mousemove", (e) => {
                if (!isDragging) return;

                const containerOffsetTop = container.offsetTop;
                let newTopHeight = e.clientY - containerOffsetTop;

                const minHeight = 30;
                const maxTopHeight = container.clientHeight - minHeight - 15;

                if (newTopHeight < minHeight) newTopHeight = minHeight;
                if (newTopHeight > maxTopHeight) newTopHeight = maxTopHeight;

                topDiv.style.height = `${newTopHeight}px`;
                topDiv.style.width = '100%';
                storedHeight = `${newTopHeight}px`;
                resetIframeSize();
            });
        }

        document.addEventListener("mouseup", () => {
            if (isDragging) {
                isDragging = false;
                document.body.style.cursor = "";
                iframe.style.pointerEvents = 'auto';
            }
        });

        vdragbar.addEventListener("mousedown", (e) => {
            isVDragging = true;
            document.body.style.cursor = isVerticalLayout ? "row-resize" : "col-resize";
            e.preventDefault();
        });



        document.addEventListener("mousemove", (e) => {
            if (!isVDragging) return;

            if (isVerticalLayout) {

                const bottomRect = bottom.getBoundingClientRect();
                let newTopHeight = e.clientY - bottomRect.top;

                const minHeight = 30;
                const maxHeight = bottom.clientHeight - minHeight - 15;

                if (newTopHeight < minHeight) newTopHeight = minHeight;
                if (newTopHeight > maxHeight) newTopHeight = maxHeight;

                bottomLeft.style.flexBasis = `${newTopHeight}px`;
            } else {

                const bottomRect = bottom.getBoundingClientRect();
                let newLeftWidth = e.clientX - bottomRect.left;

                const minWidth = 30;
                const maxWidth = bottom.clientWidth - minWidth - 15;

                if (newLeftWidth < minWidth) newLeftWidth = minWidth;
                if (newLeftWidth > maxWidth) newLeftWidth = maxWidth;

                bottomLeft.style.flexBasis = `${newLeftWidth}px`;
            }

        });

        document.addEventListener("mouseup", () => {
            if (isVDragging) {
                isVDragging = false;
                document.body.style.cursor = "";
            }
        });
    }

    setupDragbars();

    function detectLanguage(content) {
        if (/<[a-z][\s\S]*>/i.test(content)) return "htmlmixed";
        if (/<\?php|<\?=/i.test(content)) return "php";
        if (/(^|\s)(\.|#)?[a-z][a-z0-9-]*\s*\{[^}]*\}/i.test(content)) return "css";
        if (/(^|\s)(function|let|const|var|class|import|export)\s/.test(content)) return "javascript";
        return "javascript";
    }

    function createComponentTree(data) {
        const ul = document.createElement('ul');
        ul.className = 'tree';

        data.forEach(item => {
            const li = document.createElement('li');
            li.className = 'tree-item';

            if (item.children && item.children.length > 0) {
                const toggle = document.createElement('span');
                toggle.className = 'toggle-button';
                toggle.textContent = '-';

                const childTree = createComponentTree(item.children);

                toggle.addEventListener('click', () => {
                    childTree.classList.toggle('hidden');
                    toggle.textContent = childTree.classList.contains('hidden') ? '+' : '-';
                });

                li.appendChild(toggle);
                li.appendChild(document.createTextNode(item.name));
                li.appendChild(childTree);
            } else {
                li.textContent = item.name;
            }

            ul.appendChild(li);
        });

        return ul;
    }

    function createTreeView(containerId, data) {

        const container = document.getElementById(containerId);

        function createNode(node) {
            const div = document.createElement('div');
            div.className = 'tree-node';

            const titleDiv = document.createElement('div');
            titleDiv.className = 'node-title';

            let childrenDiv = null;
            if (node.children && node.children.length > 0) {
                const toggleBtn = document.createElement('button');
                toggleBtn.className = 'toggle-btn';
                toggleBtn.innerHTML = `
        <svg class="icon minus" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 12H4" />
        </svg>
      `;

                childrenDiv = document.createElement('div'); // Initialize childrenDiv
                childrenDiv.className = 'node-children';

                node.children.forEach(child => {
                    childrenDiv.appendChild(createNode(child));
                });

                toggleBtn.onclick = () => {
                    const isExpanded = childrenDiv.style.display !== 'none';
                    childrenDiv.style.display = isExpanded ? 'none' : 'block';
                    toggleBtn.innerHTML = isExpanded ?
                        `<svg class="icon plus" viewBox="0 0 24 24">
             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
           </svg>` :
                        `<svg class="icon minus" viewBox="0 0 24 24">
             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 12H4" />
           </svg>`;
                };

                titleDiv.appendChild(toggleBtn);
            }

            const titleSpan = document.createElement('span');
            titleSpan.textContent = node.title;
            titleDiv.appendChild(titleSpan);

            div.appendChild(titleDiv);
            if (childrenDiv) {
                div.appendChild(childrenDiv);
            }

            return div;
        }

        container.appendChild(createNode(data));
    }

    if(document.getElementById('component_tree')){
        createTreeView('component_tree', {!! json_encode($component->component_tree, true) !!})
    }

    function createDemoTree(obj, parent) {
        for (let key in obj) {
            const value = obj[key];
            const node = document.createElement('div');
            node.classList.add('node');

            if (typeof value === 'object' && value !== null) {
                const toggle = document.createElement('span');
                toggle.textContent = '−';
                toggle.classList.add('toggle');

                const keySpan = document.createElement('span');
                keySpan.classList.add('key');
                keySpan.textContent = `"${key}": `;

                const childrenContainer = document.createElement('div');
                childrenContainer.classList.add('children');

                createDemoTree(value, childrenContainer);

                toggle.addEventListener('click', () => {
                    childrenContainer.classList.toggle('hidden');
                    toggle.textContent = childrenContainer.classList.contains('hidden') ? '+' : '−';
                });

                node.appendChild(toggle);
                node.appendChild(keySpan);
                node.appendChild(document.createTextNode('{'));
                node.appendChild(childrenContainer);
                node.appendChild(document.createTextNode('}'));

            } else {
                const keySpan = document.createElement('span');
                keySpan.classList.add('key');
                keySpan.textContent = `"${key}": `;

                const valSpan = document.createElement('span');
                valSpan.classList.add('value');
                valSpan.textContent = typeof value === 'string' ? `"${value}"` : value;

                node.appendChild(document.createTextNode('  '));
                node.appendChild(keySpan);
                node.appendChild(valSpan);
            }

            parent.appendChild(node);
        }
    }

    const treeContainer = document.getElementById('demo_data');
    createDemoTree(<?php echo json_encode($component['demo_data']); ?>, treeContainer);

    document.getElementById('addToProject').addEventListener('click', () => {

        @if(count($projects) === 0)
            Swal.fire({
                title: '尚未创建任何项目',
                text: '点击确定到创建项目页面',
                icon: 'warning',
                confirmButtonText: '创建项目',
                background: '#1e1e1e',
                color:"#fff",
                showCancelButton: true,
                cancelButtonText: '取消',
                confirmButtonColor: '#000',
                preConfirm: () => {
                    window.location.href = '/projects/create';
                }
            })
        @endif

        @if(count($projects) > 0)
        Swal.fire({
            title: '请选择要添加的项目',
            html: `
          <form id="selectProject">
            <select id="projectSelect" class="swal2-select" name="project_id">
                @foreach($projects as $project)
                   <option value="{{ $project['id'] }}">{{ $project['title'] }}( {{$project['framework']}} )</option>
                @endforeach
            </select>
          </form>
        `,
            focusConfirm: false,
            background: '#1e1e1e',
            color:"#fff",
            showCancelButton: true,
            confirmButtonText: '确定添加',
            cancelButtonText: '取消',
            confirmButtonColor: '#000',
        }).then(result => {
            if (result.isConfirmed) {

                const projectSelect = document.getElementById('projectSelect');

                const selectedValue = projectSelect.value;

                fetch('/save-project', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                    },
                    credentials: 'include',
                    body: JSON.stringify({
                        project_id: selectedValue,
                        component_type_id: '{{ $component['id'] }}',
                    }),
                }).then(response => response.json())
                .then(data => {
                    if (data.success === true) {
                        Swal.fire({
                            title: '添加成功',
                            text: '组件和包含的子组件已成功添加到您指定的项目',
                            icon: 'success',
                            background: '#1e1e1e',
                            color:"#fff",
                            confirmButtonText: '确定',
                            confirmButtonColor: '#000',
                        });
                    }

                    if (data.success === false) {
                        Swal.fire({
                            title: '添加失败',
                            text: data.message,
                            icon: 'error',
                            background: '#1e1e1e',
                            color:"#fff",
                            confirmButtonText: '确定',
                            confirmButtonColor: '#000',
                        });
                    }
                })

            }
        });
        @endif
    });

    // editor.on("change", (cm, change) => {
    //     if (change.origin === "paste") {
    //         const content = cm.getValue();
    //         const mode = detectLanguage(content);
    //         if (mode !== cm.getOption("mode")) {
    //             cm.setOption("mode", mode);
    //             CodeMirror.autoLoadMode(cm, mode);
    //         }
    //     }
    // });

    document.getElementById("toggleBottom").addEventListener("click", () => {
        isBottomVisible = !isBottomVisible;

        if (isBottomVisible) {
            bottom.style.display = isVerticalLayout ? "flex" : "flex";
            dragbar.style.display = "block";
            if (isVerticalLayout) {
                topDiv.style.width = storedWidth;
            } else {
                topDiv.style.height = storedHeight;
            }

            document.getElementById("toggleBottom").innerHTML = desktopIcon

        } else {
            bottom.style.display = "none";
            dragbar.style.display = "none";
            if (isVerticalLayout) {
                topDiv.style.width = "100%";
            } else {
                topDiv.style.height = "100%";
            }

            document.getElementById("toggleBottom").innerHTML = upBottomLayout

        }
        resetIframeSize();
    });

    window.addEventListener("resize", () => {
        // cmInstance.refresh();
        resetIframeSize();
    });

</script>
</body>
</html>
